<template>
    <div style="opacity: .9;width: 99%;">
      <div
      :style="{
        height: '84.8vh',
        marginLeft: '10px',
        overflow: 'hidden',
        position: 'absolute',
        borderRadius: '2px',
        textAlign: 'center',
        width: '98%',
        top: 0,
      }"
    >
      <div style="margin-top: 16px">
        
        <a-button type="dashed" class="pageButton" style="opacity: 0.7;" v-show="!openMenu" @click="showDrawer1" title="地图操作"><BarChartOutlined /></a-button>
        <!-- <a-button type="primary" style="pointer-events: all;margin-top: 1em;" v-show="activeKey!=2" @click="activeSomeTabs('2')">电子围栏</a-button> -->
      </div>
      <a-drawer
        title=""
        placement="right"
        :closable="false"
        :open="openMenu"
        width="auto"
        :height="500"
        size="large"
        :get-container="false"
        @close="onCloseMenu"
      >
      <amenuMapRight :updateStartDrive="updateStartDrive" :onCloseMenu="onCloseMenu"></amenuMapRight>
      <a-button type="dashed" class="pageButton" id="987987" style="left: -38px;" @click="toggleDrawer1"><DoubleRightOutlined /></a-button>
      </a-drawer>
    </div>

  </div>
</template>
<script setup>
import amenuMapRight from '../components/AmenuMapRight.vue'
import { h, ref, watch } from 'vue';
import { defineProps } from 'vue'
const props = defineProps({
  showDrawer:Function,
  showDrawerLine:Function,
})
const { 
  showDrawerLine,
 } = props;
const openMenu = ref(false);
const startDrive = ref(0);

const showDrawer1 = () => {
  openMenu.value = true;
};
const toggleDrawer1 = () => {
  openMenu.value = !openMenu.value;
};
const onCloseMenu = () => {
  openMenu.value = false;
};
const updateStartDrive = () => {
  startDrive.value = Math.random()
};

</script>
<style scoped>
.pageButton {
  pointer-events: all;
  position: absolute; top: 50%;
  transform: translate(0, -50%);display: flex;width: 31px;
  padding: 1.3em 0px;
  justify-content: center;
  align-items: center;
  right: 0;
}
</style>
